<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        v-model="listQuery.channelId"
        filterable
        :filter-method="dataFilter"
        placeholder="选择渠道"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option v-for="item in options" :key="item.channelId" :label="item.channel_name" :value="item.channelId" />
      </el-select>
      <el-select
        v-model="listQuery.changxinghuaState"
        placeholder="畅行花"
        clearable
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option style="width: auto" label="前筛拒绝" :value="'PREVIOUS_PASSED'">前筛通过</el-option>
        <el-option style="width: auto" label="前筛拒绝" :value="'PREVIOUS_REJECT'">前筛拒绝</el-option>
        <el-option style="width: auto" label="准入通过" :value="'PUNG_PASSED'">准入通过</el-option>
        <el-option style="width: auto" label="准入失败" :value="'PUNG_REJECT'">准入失败</el-option>
        <el-option style="width: auto" label="授信表单提交成功" :value="'COMMIT_FORM_SUCCESS'">授信表单提交成功</el-option>
        <el-option style="width: auto" label="授信表单提交失败" :value="'COMMIT_FORM_FAIL'">授信表单提交失败</el-option>
        <el-option style="width: auto" label="授信成功" :value="'COMMIT_FORM_PASSED'">授信成功</el-option>
        <el-option style="width: auto" label="授信失败" :value="'COMMIT_FORM_REJECT'">授信失败</el-option>
        <el-option style="width: auto" label="放款审核失败" :value="'LEND_CHECK_REJECT'">放款审核失败</el-option>
        <el-option style="width: auto" label="放款审核成功" :value="'LEND_CHECK_PASSED'">放款审核成功</el-option>
        <el-option style="width: auto" label="放款失败" :value="'LEND_FAIL'">放款失败</el-option>
        <el-option style="width: auto" label="放款成功" :value="'LEND_FINISHED'">放款成功</el-option>
        <el-option style="width: auto" label="还款成功" :value="'REPAYMENT_FINISHED'">还款成功</el-option>
      </el-select>
      <el-select
        v-model="listQuery.yangqianguanState"
        placeholder="洋钱罐"
        clearable
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option style="width: auto" label="前筛拒绝" :value="'PREVIOUS_PASSED'">前筛通过</el-option>
        <el-option style="width: auto" label="前筛拒绝" :value="'PREVIOUS_REJECT'">前筛拒绝</el-option>
        <el-option style="width: auto" label="准入通过" :value="'PUNG_PASSED'">准入通过</el-option>
        <el-option style="width: auto" label="准入失败" :value="'PUNG_REJECT'">准入失败</el-option>
        <el-option style="width: auto" label="授信表单提交成功" :value="'COMMIT_FORM_SUCCESS'">授信表单提交成功</el-option>
        <el-option style="width: auto" label="授信表单提交失败" :value="'COMMIT_FORM_FAIL'">授信表单提交失败</el-option>
        <el-option style="width: auto" label="授信成功" :value="'COMMIT_FORM_PASSED'">授信成功</el-option>
        <el-option style="width: auto" label="授信失败" :value="'COMMIT_FORM_REJECT'">授信失败</el-option>
        <el-option style="width: auto" label="放款审核失败" :value="'LEND_CHECK_REJECT'">放款审核失败</el-option>
        <el-option style="width: auto" label="放款审核成功" :value="'LEND_CHECK_PASSED'">放款审核成功</el-option>
        <el-option style="width: auto" label="放款失败" :value="'LEND_FAIL'">放款失败</el-option>
        <el-option style="width: auto" label="放款成功" :value="'LEND_FINISHED'">放款成功</el-option>
        <el-option style="width: auto" label="还款成功" :value="'REPAYMENT_FINISHED'">还款成功</el-option>
      </el-select>
      <el-select
        v-model="listQuery.xiaoyingState"
        placeholder="小赢"
        clearable
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option style="width: auto" label="前筛拒绝" :value="'PREVIOUS_PASSED'">前筛通过</el-option>
        <el-option style="width: auto" label="前筛拒绝" :value="'PREVIOUS_REJECT'">前筛拒绝</el-option>
        <el-option style="width: auto" label="准入通过" :value="'PUNG_PASSED'">准入通过</el-option>
        <el-option style="width: auto" label="准入失败" :value="'PUNG_REJECT'">准入失败</el-option>
        <el-option style="width: auto" label="授信表单提交成功" :value="'COMMIT_FORM_SUCCESS'">授信表单提交成功</el-option>
        <el-option style="width: auto" label="授信表单提交失败" :value="'COMMIT_FORM_FAIL'">授信表单提交失败</el-option>
        <el-option style="width: auto" label="授信成功" :value="'COMMIT_FORM_PASSED'">授信成功</el-option>
        <el-option style="width: auto" label="授信失败" :value="'COMMIT_FORM_REJECT'">授信失败</el-option>
        <el-option style="width: auto" label="放款审核失败" :value="'LEND_CHECK_REJECT'">放款审核失败</el-option>
        <el-option style="width: auto" label="放款审核成功" :value="'LEND_CHECK_PASSED'">放款审核成功</el-option>
        <el-option style="width: auto" label="放款失败" :value="'LEND_FAIL'">放款失败</el-option>
        <el-option style="width: auto" label="放款成功" :value="'LEND_FINISHED'">放款成功</el-option>
        <el-option style="width: auto" label="还款成功" :value="'REPAYMENT_FINISHED'">还款成功</el-option>
      </el-select>
      <el-select
        v-model="listQuery.shuyaoState"
        placeholder="数钥"
        clearable
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option style="width: auto" label="前筛拒绝" :value="'PREVIOUS_PASSED'">前筛通过</el-option>
        <el-option style="width: auto" label="前筛拒绝" :value="'PREVIOUS_REJECT'">前筛拒绝</el-option>
        <el-option style="width: auto" label="准入通过" :value="'PUNG_PASSED'">准入通过</el-option>
        <el-option style="width: auto" label="准入失败" :value="'PUNG_REJECT'">准入失败</el-option>
        <el-option style="width: auto" label="授信表单提交成功" :value="'COMMIT_FORM_SUCCESS'">授信表单提交成功</el-option>
        <el-option style="width: auto" label="授信表单提交失败" :value="'COMMIT_FORM_FAIL'">授信表单提交失败</el-option>
        <el-option style="width: auto" label="授信成功" :value="'COMMIT_FORM_PASSED'">授信成功</el-option>
        <el-option style="width: auto" label="授信失败" :value="'COMMIT_FORM_REJECT'">授信失败</el-option>
        <el-option style="width: auto" label="放款审核失败" :value="'LEND_CHECK_REJECT'">放款审核失败</el-option>
        <el-option style="width: auto" label="放款审核成功" :value="'LEND_CHECK_PASSED'">放款审核成功</el-option>
        <el-option style="width: auto" label="放款失败" :value="'LEND_FAIL'">放款失败</el-option>
        <el-option style="width: auto" label="放款成功" :value="'LEND_FINISHED'">放款成功</el-option>
        <el-option style="width: auto" label="还款成功" :value="'REPAYMENT_FINISHED'">还款成功</el-option>
      </el-select>
      <el-input v-model="listQuery.phone" placeholder="手机号" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="ID" prop="id" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="渠道" class-name="status-col" width="200">
        <template slot-scope="{row}">
          <span>{{ row.channelName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户" class-name="status-col" width="120">
        <template slot-scope="{row}">
          <span>{{ row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="畅行花" min-width="100" align="center" :formatter="h5Formatter">
        <template slot-scope="{row}">
          <el-tag v-if="row.changxinghuaState === 'PREVIOUS_PASSED'" type="success">前筛通过</el-tag>
          <el-tag v-if="row.changxinghuaState === 'PREVIOUS_REJECT'" type="danger">前筛拒绝</el-tag>
          <el-tag v-if="row.changxinghuaState === 'PUNG_PASSED'" type="success">准入通过</el-tag>
          <el-tag v-if="row.changxinghuaState === 'PUNG_REJECT'" type="danger">准入失败</el-tag>
          <el-tag v-if="row.changxinghuaState === 'COMMIT_FORM_SUCCESS'" type="success">授信表单提交成功</el-tag>
          <el-tag v-if="row.changxinghuaState === 'COMMIT_FORM_FAIL'" type="danger">授信表单提交失败</el-tag>
          <el-tag v-if="row.changxinghuaState === 'COMMIT_FORM_PASSED'" type="success">授信成功</el-tag>
          <el-tag v-if="row.changxinghuaState === 'COMMIT_FORM_REJECT'" type="danger">授信失败</el-tag>
          <el-tag v-if="row.changxinghuaState === 'BIND_CARD_PASSED'" type="success">绑卡通过</el-tag>
          <el-tag v-if="row.changxinghuaState === 'BIND_CARD_REJECT'" type="danger">绑卡失败</el-tag>
          <el-tag v-if="row.changxinghuaState === 'LEND_CHECK_PASSED'" type="success">放款审核通过</el-tag>
          <el-tag v-if="row.changxinghuaState === 'LEND_CHECK_REJECT'" type="danger">放款审核失败</el-tag>
          <el-tag v-if="row.changxinghuaState === 'LEND_FINISHED'" type="success">放款成功</el-tag>
          <el-tag v-if="row.changxinghuaState === 'LEND_FAIL'" type="danger">放款失败</el-tag>
          <el-tag v-if="row.changxinghuaState === 'REPAYMENT_FINISHED'" type="success">还款成功</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="洋钱罐" min-width="100" align="center" :formatter="h5Formatter">
        <template slot-scope="{row}">
          <el-tag v-if="row.yangqianguanState === 'PREVIOUS_PASSED'" type="success">前筛通过</el-tag>
          <el-tag v-if="row.yangqianguanState === 'PREVIOUS_REJECT'" type="danger">前筛拒绝</el-tag>
          <el-tag v-if="row.yangqianguanState === 'PUNG_PASSED'" type="success">准入通过</el-tag>
          <el-tag v-if="row.yangqianguanState === 'PUNG_REJECT'" type="danger">准入失败</el-tag>
          <el-tag v-if="row.yangqianguanState === 'COMMIT_FORM_SUCCESS'" type="success">授信表单提交成功</el-tag>
          <el-tag v-if="row.yangqianguanState === 'COMMIT_FORM_FAIL'" type="danger">授信表单提交失败</el-tag>
          <el-tag v-if="row.yangqianguanState === 'COMMIT_FORM_PASSED'" type="success">授信成功</el-tag>
          <el-tag v-if="row.yangqianguanState === 'COMMIT_FORM_REJECT'" type="danger">授信失败</el-tag>
          <el-tag v-if="row.yangqianguanState === 'BIND_CARD_PASSED'" type="success">绑卡通过</el-tag>
          <el-tag v-if="row.yangqianguanState === 'BIND_CARD_REJECT'" type="danger">绑卡失败</el-tag>
          <el-tag v-if="row.yangqianguanState === 'LEND_CHECK_PASSED'" type="success">放款审核通过</el-tag>
          <el-tag v-if="row.yangqianguanState === 'LEND_CHECK_REJECT'" type="danger">放款审核失败</el-tag>
          <el-tag v-if="row.yangqianguanState === 'LEND_FINISHED'" type="success">放款成功</el-tag>
          <el-tag v-if="row.yangqianguanState === 'LEND_FAIL'" type="danger">放款失败</el-tag>
          <el-tag v-if="row.yangqianguanState === 'REPAYMENT_FINISHED'" type="success">还款成功</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="小赢" min-width="100" align="center" :formatter="h5Formatter">
        <template slot-scope="{row}">
          <el-tag v-if="row.xiaoyingState === 'PREVIOUS_PASSED'" type="success">前筛通过</el-tag>
          <el-tag v-if="row.xiaoyingState === 'PREVIOUS_REJECT'" type="danger">前筛拒绝</el-tag>
          <el-tag v-if="row.xiaoyingState === 'PUNG_PASSED'" type="success">准入通过</el-tag>
          <el-tag v-if="row.xiaoyingState === 'PUNG_REJECT'" type="danger">准入失败</el-tag>
          <el-tag v-if="row.xiaoyingState === 'COMMIT_FORM_SUCCESS'" type="success">授信表单提交成功</el-tag>
          <el-tag v-if="row.xiaoyingState === 'COMMIT_FORM_FAIL'" type="danger">授信表单提交失败</el-tag>
          <el-tag v-if="row.xiaoyingState === 'COMMIT_FORM_PASSED'" type="success">授信成功</el-tag>
          <el-tag v-if="row.xiaoyingState === 'COMMIT_FORM_REJECT'" type="danger">授信失败</el-tag>
          <el-tag v-if="row.xiaoyingState === 'BIND_CARD_PASSED'" type="success">绑卡通过</el-tag>
          <el-tag v-if="row.xiaoyingState === 'BIND_CARD_REJECT'" type="danger">绑卡失败</el-tag>
          <el-tag v-if="row.xiaoyingState === 'LEND_CHECK_PASSED'" type="success">放款审核通过</el-tag>
          <el-tag v-if="row.xiaoyingState === 'LEND_CHECK_REJECT'" type="danger">放款审核失败</el-tag>
          <el-tag v-if="row.xiaoyingState === 'LEND_FINISHED'" type="success">放款成功</el-tag>
          <el-tag v-if="row.xiaoyingState === 'LEND_FAIL'" type="danger">放款失败</el-tag>
          <el-tag v-if="row.xiaoyingState === 'REPAYMENT_FINISHED'" type="success">还款成功</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="数钥" min-width="100" align="center" :formatter="h5Formatter">
        <template slot-scope="{row}">
          <el-tag v-if="row.shuyaoState === 'PREVIOUS_PASSED'" type="success">前筛通过</el-tag>
          <el-tag v-if="row.shuyaoState === 'PREVIOUS_REJECT'" type="danger">前筛拒绝</el-tag>
          <el-tag v-if="row.shuyaoState === 'PUNG_PASSED'" type="success">准入通过</el-tag>
          <el-tag v-if="row.shuyaoState === 'PUNG_REJECT'" type="danger">准入失败</el-tag>
          <el-tag v-if="row.shuyaoState === 'COMMIT_FORM_SUCCESS'" type="success">授信表单提交成功</el-tag>
          <el-tag v-if="row.shuyaoState === 'COMMIT_FORM_FAIL'" type="danger">授信表单提交失败</el-tag>
          <el-tag v-if="row.shuyaoState === 'COMMIT_FORM_PASSED'" type="success">授信成功</el-tag>
          <el-tag v-if="row.shuyaoState === 'COMMIT_FORM_REJECT'" type="danger">授信失败</el-tag>
          <el-tag v-if="row.shuyaoState === 'BIND_CARD_PASSED'" type="success">绑卡通过</el-tag>
          <el-tag v-if="row.shuyaoState === 'BIND_CARD_REJECT'" type="danger">绑卡失败</el-tag>
          <el-tag v-if="row.shuyaoState === 'LEND_CHECK_PASSED'" type="success">放款审核通过</el-tag>
          <el-tag v-if="row.shuyaoState === 'LEND_CHECK_REJECT'" type="danger">放款审核失败</el-tag>
          <el-tag v-if="row.shuyaoState === 'LEND_FINISHED'" type="success">放款成功</el-tag>
          <el-tag v-if="row.shuyaoState === 'LEND_FAIL'" type="danger">放款失败</el-tag>
          <el-tag v-if="row.shuyaoState === 'REPAYMENT_FINISHED'" type="success">还款成功</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创赢" min-width="100" align="center" :formatter="h5Formatter">
        <template slot-scope="{row}">
          <el-tag v-if="row.chuangyingState === 'PREVIOUS_PASSED'" type="success">前筛通过</el-tag>
          <el-tag v-if="row.chuangyingState === 'PREVIOUS_REJECT'" type="danger">前筛拒绝</el-tag>
          <el-tag v-if="row.chuangyingState === 'PUNG_PASSED'" type="success">准入通过</el-tag>
          <el-tag v-if="row.chuangyingState === 'PUNG_REJECT'" type="danger">准入失败</el-tag>
          <el-tag v-if="row.chuangyingState === 'COMMIT_FORM_SUCCESS'" type="success">授信表单提交成功</el-tag>
          <el-tag v-if="row.chuangyingState === 'COMMIT_FORM_FAIL'" type="danger">授信表单提交失败</el-tag>
          <el-tag v-if="row.chuangyingState === 'COMMIT_FORM_PASSED'" type="success">授信成功</el-tag>
          <el-tag v-if="row.chuangyingState === 'COMMIT_FORM_REJECT'" type="danger">授信失败</el-tag>
          <el-tag v-if="row.chuangyingState === 'BIND_CARD_PASSED'" type="success">绑卡通过</el-tag>
          <el-tag v-if="row.chuangyingState === 'BIND_CARD_REJECT'" type="danger">绑卡失败</el-tag>
          <el-tag v-if="row.chuangyingState === 'LEND_CHECK_PASSED'" type="success">放款审核通过</el-tag>
          <el-tag v-if="row.chuangyingState === 'LEND_CHECK_REJECT'" type="danger">放款审核失败</el-tag>
          <el-tag v-if="row.chuangyingState === 'LEND_FINISHED'" type="success">放款成功</el-tag>
          <el-tag v-if="row.chuangyingState === 'LEND_FAIL'" type="danger">放款失败</el-tag>
          <el-tag v-if="row.chuangyingState === 'REPAYMENT_FINISHED'" type="success">还款成功</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="200" align="center">
        <template slot-scope="{row}">
          <span>{{ row.gmtDatetime }}</span>
        </template>
      </el-table-column>



      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            用户详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="loanList"
    />

    <el-dialog :title="textMap[dialogStatus]" width="80%" :visible.sync="dialogFormVisible">
      <div class="nick">
        用户信息
        <p
          style="
        width:100px;
        height:4px;
        border-radius:2px;
        background:#425DE5;
        margin: 0 auto;
        margin-top: 10px;"
        />
      </div>

      <div class="link-top" />
      <UserDetail :user-base-info="userBaseInfo" />

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          关闭
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 用户详情组件
import UserDetail from '@/components/userDetail'
import { queryProcessList } from '@/api/apiloan'
import waves from '@/directive/waves' // waves directive
import { getChannelIdAndNick, getPhoneUserDetail } from '@/api/user'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'Processlist',
  components: { Pagination, UserDetail },
  directives: { waves },
  data() {
    return {
      options: [],
      optionsCopy: [],
      limitNum: 1,
      tableData: [
        {
          id: 1,
          channel_id: 1,
          phone: 1,
          shuyaoPung: 1,
          shuyaoState: 'PREVIOUS_PASSED',
          xiaoyingPung: 1,
          xiaoyingState: 'PREVIOUS_PASSED',
          yangqianguanPung: 1,
          yangqianguanState: 'PREVIOUS_PASSED',
          changxinghuaPung: 1,
          changxinghuaState: 'PREVIOUS_PASSED',
          gmtDatetime: '2021-01-01',
          gmtDate: 1
        }
      ],
      dialogFormVisible: false,
      textMap: {
        update: '用户详情',
        create: '新增'
      },
      userBaseInfo: {
        login_datetime: '',
        authBaseInfo: 1,
        authContact: 1,
        authIdentity: 1,
        contactEmail: '',
        contactName: '',
        contactPhone: '',
        email: '-',
        interest: 33.33,
        level: 0,
        loginTime: null,
        longText: '',
        nick: '',
        orderGmtDatetime: '',
        phone: '',
        regAddress: '',
        regIp: '',
        regTime: '',
        state: 1,
        userAuthId: 11,
        userId: 6,
        userOrderFlows: null,
        vipId: 1,
        vipNo: null,
        userDevice: {},
        user: {},
        userAccount: {},
        userLiveOcrLog: {},
        userMes: {},
        userContactMes: {}

      },
      dialogStatus: '',
      total: 1,
      tableKey: 0,
      listQuery: {
        current: 1,
        size: 10,
        sysLabel: '',
        channelId: null
      },
      downloadLoading: false,
      listLoading: false
    }
  },
  created() {
    this.loanList(this.listQuery)
    this.getChannelIdAndNick()
  },
  methods: {
    async handleUpdate(row) {
      const res = await getPhoneUserDetail({ 'userId': row.userId })
      if (res.data.data === null) {
        this.$notify({
          title: '错误',
          message: '获取失败',
          type: 'fail',
          duration: 2000
        })
      }
      this.userBaseInfo = res.data.data
      // this.userBaseInfo.loanApps = [{ appName: '1', gmtDatetime: '2323' }, { appName: '2', gmtDatetime: '22323' }]
      this.temp = Object.assign({}, row) // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    // 渠道下拉
    async getChannelIdAndNick() {
      const res = await getChannelIdAndNick(this.listQuery)
      res.data.data.forEach(element => {
        if (element.channel_name !== null) {
          this.optionsCopy.push(element)
          this.options.push(element)
        }
      })
    },
    dataFilter(val) {
      this.value = val
      if (val) { // val存在
        this.options = this.optionsCopy.filter((item) => {
          console.log(item)
          if (!!~item.channel_name.indexOf(val) || !!~item.channel_name.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          }
        })
      } else { // val为空时，还原数组
        this.options = this.optionsCopy
      }
    },
    h5Formatter(row, col) {
      // console.log(row.h5)
      return row.h5.size
    },
    // 获取列表
    async loanList(listQuery) {
      const res = await queryProcessList(this.listQuery)
      this.tableData = res.data.data.records
      this.total = res.data.data.total
    },
    handleFilter() {
      this.listQuery.current = 1
      this.loanList(this.listQuery)
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    }
  }
}
</script>

<style scoped>
.pic{
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color:rgb(35, 248, 124)
}
.fail{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
td{
  width: 25%;
}
.info{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 500;
  color: #333;
  font-size: 20px;
}
.info-name{
  margin-left: 50px;
  margin-top: 10px;
  text-align: right;
  color:#666;
  font-size: 20px;
}
.title-con{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.title{
  margin-top: 0px;
  margin-left: 10px;
  font-size: 28px;
  font-weight: 400;
  /* border-bottom: 1px dashed #304156; */
  padding-bottom: 10px;
  vertical-align: middle;
}
.box{
  margin-top: 10px;
  width: 100%;
  border: solid #304156 1px;
  padding: 20px 10px;
  border-radius: 10px;
}
.nick{
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  width: 120px;
  margin: 0 auto;
  /* border-bottom: solid #425DE5 5px; */
  padding-bottom: 10px;
  /* border-radius: 2px; */
}
/* .link-top {
  margin-left: 10px;
  margin-top: 10px;
  width: 100%;
  height: 2px;
  border-top: solid #304156 2px;
} */
.link-title {
  height: 10px;
  display: inline-block;
  width: calc(100% - 175px);
  margin-left: 10px;
  border-top: dashed rgb(172, 176, 177) 2px;
}
.link-title-5 {
  height: 10px;
  display: inline-block;
  width: calc(100% - 199px);
  margin-left: 10px;
  border-top: dashed rgb(172, 176, 177) 2px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.line{
  display: inline-block;
  height: 28px;
  width: 4px;
  background: #425DE5;
  border-radius: 2px;
  vertical-align: -4px;
}
.table-width{
  width: 99%;
}
.tr-width{
  width: 99%;
}
table{
  letter-spacing:1.5px;
}
.info-img{
  width: 243px;
  height: 153px;
}
</style>
